import React from 'react';
import { inject, observer } from 'mobx-react';
import { WeaTableEdit, WeaDialog, WeaTextarea, WeaBrowser, WeaCheckbox, WeaDatePicker, WeaFormItem, WeaSelect, WeaLocaleProvider } from 'ecCom';
import { Button } from 'antd';
import { toJS } from 'mobx';
import './../../style/index';
import './../../util/index';
import AddRemindFormStore from './../../stores/remindStore/AddRemindFormStore';

const getLabel = WeaLocaleProvider.getLabel;
@observer
export default class AddRemindForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '',
      startValue: new Date().setDate(1),
      endValue: new Date(),
      store: new AddRemindFormStore(),
    };
  }

  componentWillMount() {
    const { store } = this.state;
    const { doNew } = store;
    doNew(this);
  }
  // componentDidMount() {
  //     if (window.weaCrm) {
  //         this.setState({ weaCrmLoaded: true});
  //     } else {
  //         eventRegister.loadModule('f_crm', () => {
  //             this.setState({ weaCrmLoaded: true});
  //         }, () => {
  //             alert("加载客户模块失败，请联系系统管理员！");
  //         });
  //     }
  // }
  render() {
    const buttons = [
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@8d7jku@save`} type="primary" onClick={() => { submitCommomReply(); }}>{getLabel('826', '确定')}</Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@iqgm4g@reset`} type="primary" onClick={() => { commonLanguageChance(''); }}>{getLabel('2022', '重置')}</Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@qq9bge@cancel`} type="ghost" onClick={() => { this.setState({ lvisible: false }); }} >{getLabel('201', '取消')}</Button>,
    ];
    const { store } = this.state;
    const { receiverBroswerValue, chanceBroswerValue, timedSende, textareaValue, senderTime, commonLanguage, customerBroswerValue } = store;
    // 方法
    const { timedSendeChange, sendWayChange, textareaValueChange, dataPickChange, submitCommomReply, saveAddRemind,
      resetForm, getHrm, getSellChance, commonLanguageChance, getCustomer, customerid, contacterBroswerValue, getContacter } = store;
    // console.log(toJS(receiverBroswerValue));
    const listWeaDialog = [];
    let listWeaTab = [];
    const dataPicker = {};
    const ua = window.navigator.userAgent;
    if (ua.match('E-Mobile')) { // 如果在EMPC
      listWeaTab = [];
      // console.log("EMPC里")
    } else if (!ua.match('E-Mobile') && window.em) { // 如果在EM网页
      listWeaDialog.zIndex = 100001;
      // dataPicker = { zIndex: 100002 }
      // console.log("EM网页里")
    } else {
      listWeaTab.buttons = [<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@qqgj5x@create`} type="primary" onClick={() => { this.setState({ visible: true }); }}>{getLabel('82', '新建')}</Button>];
      // console.log("其他里")
    }

    return (
      <div className="crm-addRemind-pc">
        <WeaTextarea
          ecId={`${this && this.props && this.props.ecId || ''}_WeaTextarea@nrispz`}
          ref="remindValue"
          onChange={textareaValueChange}
          value={textareaValue}
          minRows={5}
          placeholder={getLabel('514764', '点击输入提醒内容...')}
        />
        <div className="crm-sellchance-remind-common-body" style={{ display: 'flex', height: '40px', lineHeight: '40px', backgroundColor: '#fff' }}>
          <div style={{ display: 'flex' }} onClick={() => { this.setState({ lvisible: true }); }}>
            <i className="icon-coms-edit" style={{ lineHeight: '40px' }} />
            <div style={{ marginLeft: '10px' }}>{getLabel('514765', '新建常用语')}</div>
          </div>
          <div style={{ display: 'flex', margin: '0 0 0 auto ' }} onClick={() => { this.setState({ chose: true }); }}>
            <i className="icon-coms-Add-to-o" style={{ lineHeight: '40px' }} />
            <div style={{ marginLeft: '10px' }}>{getLabel('131178', '添加常用语')}</div>
          </div>
        </div>
        <WeaFormItem
          ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@fruejb`}
          label={getLabel('15525', '接收人')}
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
        >
          <WeaBrowser
            ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@bcej8f`}
            title={getLabel('15525', '接收人')}
            ref="receiverref"
            icon="icon-coms-hrm"
            type={1}
            hasAdvanceSerach
            replaceDatas={toJS(receiverBroswerValue)}
            textDecoration
            inputStyle={{ width: 200 }}
            onChange={(ids, names, datas) => { getHrm(datas); }}
            {...listWeaDialog}
            iconBgcolor="#96358a"
          />
        </WeaFormItem>
        <WeaFormItem
          ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@jhu2f4`}
          label={getLabel('84372', '相关商机')}
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
        >
          <WeaBrowser
            ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@1dbcqr`}
            replaceDatas={toJS(chanceBroswerValue)}
            ref="sellchanceref"
            title={getLabel('84372', '相关商机')}
            icon="icon-coms-crm"
            hasAdvanceSerach
            type={316}
            textDecoration
            inputStyle={{ width: 200 }}
            onChange={(ids, names, datas) => { getSellChance(datas); }}
            dataParams={{ customer: customerid }}
            completeParams={{ customer: customerid }}
            {...listWeaDialog}
            iconBgcolor="#96358a"
          />
        </WeaFormItem>
        <WeaFormItem
          ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@agxxg6`}
          label={getLabel('783', '相关客户')}
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
        >
          <WeaBrowser
            ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@rxlet7`}
            replaceDatas={toJS(customerBroswerValue)}
            title={getLabel('783', '相关客户')}
            icon="icon-coms-crm"
            hasAdvanceSerach
            ref="customerref"
            type={7}
            textDecoration
            inputStyle={{ width: 200 }}
            onChange={(ids, names, datas) => { getCustomer(datas); }}
            {...listWeaDialog}
            iconBgcolor="#96358a"
          />
        </WeaFormItem>
        <WeaFormItem
          ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@jfmzac`}
          label={getLabel('84373', '相关联系人')}
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
        >
          <WeaBrowser
            ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@7ucn7r`}
            replaceDatas={toJS(contacterBroswerValue)}
            ref="contacterref"
            title={getLabel('84373', '相关联系人')}
            icon="icon-coms-crm"
            type={67}
            textDecoration
            inputStyle={{ width: 200 }}
            dataParams={{ customerid }}
            completeParams={{ customerid }}
            onChange={(ids, names, datas) => { getContacter(datas); }}
            hasAdvanceSerach
            {...listWeaDialog}
            iconBgcolor="#96358a"
          />
        </WeaFormItem>
        <WeaFormItem
          ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@mkp6yg`}
          label={getLabel('26457', '发送方式')}
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
        >
          <WeaSelect
            ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@yoolz6`}
            options={[{
              key: '1',
              selected: true,
              showname: getLabel('127006', '应用内'),
            }, {
              key: '2',
              selected: false,
              showname: getLabel('22825', '短信'),
            },
            ]}
            detailtype={3}
            onChange={(v, showname) => {
              sendWayChange(v);
            }}
          />
        </WeaFormItem>
        <WeaFormItem
          ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@k6su4v`}
          label={getLabel('32028', '定时发送')}
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
        >
          <WeaCheckbox
            ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@du3rqj`}
            value={timedSende ? '1' : '0'}
            display={'switch'}
            id="test"
            style={{ display: 'inline' }}
            onChange={(value) => {
              const checked = value == '1';
              timedSendeChange(checked);
            }}
          />
        </WeaFormItem>
        {timedSende && <WeaFormItem
          ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@r04zt0`}
          label={getLabel('18961', '发送时间')}
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
        >
          <WeaDatePicker
            ecId={`${this && this.props && this.props.ecId || ''}_WeaDatePicker@pf1gko`}
            showTime={{ format: 'HH:mm:ss' }}
            format="yyyy-MM-dd HH:mm:ss"
            value={senderTime}
            startValue={senderTime}
            onChange={value => dataPickChange(value)}
            style={dataPicker}
          />
        </WeaFormItem>}
        <WeaDialog
          ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@g6g12u`}
          title={getLabel('514765', '新建常用语')}
          onCancel={() => this.setState({ lvisible: false })}
          visible={this.state.lvisible}
          style={{ width: 400, height: 300 }}
          buttons={buttons}
          hasScroll
          {...listWeaDialog}
          icon={'icon-coms-crm'}
          iconBgcolor="#96358a"
        >
          <div style={{ margin: '15px' }}>
            <WeaTextarea
              ecId={`${this && this.props && this.props.ecId || ''}_WeaTextarea@8w4d0z`}
              onChange={commonLanguageChance}
              value={commonLanguage}

              minRows={5}
              placeholder={getLabel('514763', '请输入常用语...')}
            />
          </div>
        </WeaDialog>
        <WeaDialog
          ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@1lld8i`}
          title={getLabel('514778', '选择常用语')}
          onCancel={() => this.setState({ chose: false })}
          visible={this.state.chose}
          style={{ width: 400, height: 300 }}
          hasScroll
          {...listWeaDialog}
          icon={'icon-coms-crm'}
          iconBgcolor="#96358a"
        >
          <div>
            {this.getCommonLanguages()}
          </div>
        </WeaDialog>
      </div>
    );
  }

  getCommonLanguages() {
    const { commonLanguageList = [], textareaValueChange } = this.state.store;
    const commonLanguages = [];
    commonLanguageList.length > 0 && commonLanguageList[0].map((item, index) => {
      const { label, value, id } = item;
      commonLanguages.push(
        <div
          dangerouslySetInnerHTML={{ __html: value }}
          onClick={() => {
            // textareaValueChange(value, id);
            this.setState({ chose: false });
            this.refs.remindValue.setValue(value);
          }}
          key={index}
          style={{
            textAlign: 'center',
            borderBottom: '1px solid #eee',
            padding: '12px 10px',
            color: '#000',
          }}
          // className='crm-sellchance-remind-commonlanguage-item'
        />,
      );
    });
    return <div className="crm-sellchance-remind-commonlanguage-main"> <div className="crm-sellchance-remind-commonlanguage">{commonLanguages}</div></div>;
  }
}
